﻿@namespace Masa.Blazor.Docs.Components
@inherits NextTickComponentBase

@if (_rendered)
{
    <AppSheet Dark="Dark" Class="m-example">
        <MRow NoGutters>
            <MCol Cols="12" Md="@(HasRightOptions ? 8 : 12)">
                <MResponsive Class="d-flex" Height="44">
                    @if (_toggleParameters.Any())
                    {
                        <MSlideGroup ActiveClass="primary--text" Mandatory Value="_toggleValue" ValueChanged="ToggleValueChanged">
                            @foreach (var item in _toggleParameters)
                            {
                                <MSlideItem @key="item" Value="@item.Key">
                                    <MButton IsActive="@context.Active"
                                             Depressed
                                             Height="44"
                                             Text
                                             Tile
                                             OnClick="() => context.Toggle()">
                                        @string.Join(" ", GeneratedRegexes.SingleCamelCase().Split(item.Key))
                                    </MButton>
                                </MSlideItem>
                            }
                        </MSlideGroup>
                    }
                </MResponsive>

                <AppDivider />

                <MSheet Class="overflow-y-auto fill-height d-flex align-center justify-center pa-14 m-example__comp"
                        MinHeight="400"
                        MaxHeight="400"
                        Rounded="@("t")">
                    <DynamicComponent Type="@_type" Parameters="@Parameters"></DynamicComponent>
                </MSheet>
            </MCol>

            @if (HasRightOptions)
            {
                <MCol Cols="12" Md="4">
                    <div class="d-flex align-center">
                        <AppDivider Vertical />

                        <div class="d-flex align-center" style="height: 44px">
                            <div class="text-h6 font-weight-medium text-undefined ml-4">Options</div>
                        </div>
                    </div>

                    <AppDivider />

                    <div class="d-flex">
                        <AppDivider Vertical />

                        <MResponsive Class="overflow-y-auto pa-3"
                                     Height="@("100%")"
                                     MaxHeight="400"
                                     MinHeight="400">
                            @foreach (var (item, i) in _checkboxParameters.Select((item, i) => (item, i)))
                            {
                                <MCheckbox @key="item"
                                           @bind-Value="@item.Value.Value"
                                           Label="@item.Key"
                                           Class="@(i == 0 ? "mt-0" : "")"
                                           Dense
                                           HideDetails="true"
                                           Inset>
                                </MCheckbox>
                            }

                            @foreach (var item in _sliderParameters)
                            {
                                <MSlider @key="item"
                                         @bind-Value="@item.Value.Value"
                                         Label="@item.Key"
                                         Max="@item.Value.Max"
                                         Min="@item.Value.Min"
                                         Step="@item.Value.Step"
                                         Class="my-2"
                                         HideDetails="true">
                                </MSlider>
                            }

                            @foreach (var item in _selectParameters)
                            {
                                <MSelect Items="@item.Value.Items"
                                         @bind-Value="@item.Value.Value"
                                         ItemValue="i => i"
                                         ItemText="i => i"
                                         Label="@item.Key"
                                         Class="my-2"
                                         Clearable
                                         Dense
                                         Filled
                                         HideDetails="true">
                                </MSelect>
                            }
                        </MResponsive>
                    </div>
                </MCol>
            }

            <MCol Cols="12">
                <AppDivider />
            </MCol>
            <MCol Cols="12">
                <Markup RoundedTop0 Code="@SourceCode" Language="razor" IsUsage></Markup>
            </MCol>
        </MRow>
    </AppSheet>
}
else
{
    <MSkeletonLoader MinHeight="490" MaxHeight="490" Type="card"></MSkeletonLoader>
}
